<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<body>
		<img src="img/fuzhuang.jpg"/ class="shopping-cart"><br><br><br><br><br><br>
		<img src="img/fuzhuang.jpg"/>
<input type="button" class="add-to-cart" value="11" />
	</body>

</html>
<script type="text/javascript">
	$('.add-to-cart').on('click', function(){
			
				var cart = $('.shopping-cart');
				var imgtodrag = $(this).prev();
				
				if(imgtodrag) {
					
					var imgclone = imgtodrag.clone()
						.offset({
							top: imgtodrag.offset().top,
							left: imgtodrag.offset().left
						})
						.css({
							'opacity': '0.5',
							'position': 'absolute',
							'height': '150px',
							'width': '150px',
							'z-index': '100'
						}).appendTo($('body'))
						.animate({
							'top': cart.offset().top ,
							'left': cart.offset().left ,
							'width': 75,
							'height': 75
						}, 1000, 'easeInOutExpo');
					imgclone.animate({
						'width': 0,
						'height': 0
					}, function() {
						$(this).detach()
					});
				}
				})
</script>